<template>
	<div id="registerpage">
		<el-form class="registerform" ref="registerForm" status-icon :rules="rules" :model="registerForm"
			label-width="100px" label-position="right">
			<div class="RF-header">
				注册用户
			</div>
			<el-form-item label="手机号" prop="phone">
				<el-input class="registerform-input" v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="姓名" prop="userName">
				<el-input class="registerform-input" v-model="registerForm.userName" placeholder="请输入昵名"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input class="registerform-input" v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input class="registerform-input" v-model="registerForm.password" type="password"
					placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="dbpassword">
				<el-input class="registerform-input" v-model="registerForm.dbpassword" type="password"
					placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="gender">
				<el-radio-group v-model="registerForm.gender">
					<el-radio label="2">隐藏</el-radio>
					<el-radio label="1">男</el-radio>
					<el-radio label="0">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<div class="el-form-item-img">
				<el-upload :action="action" :on-preview="handlePreview" :on-remove="handleRemove"
					:on-success="handleSuccess" :show-file-list="false">
					<div class="box-img">
						<img :src="imgURL" alt="请选择头像">
					</div>
				</el-upload>
			</div>
			<div>
				<el-button class="registerform-button" type="primary" @click="submitForm">注册</el-button>
				<el-button class="registerform-button" @click="resetForm">重置</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	import { baseURL } from '@/config/data.config';
	export default {
		name: 'register',
		data() {
			return {
				registerForm: {
					phone: '',
					email: '',
					userName: '',
					password: '',
					dbpassword: '',
					gender: '2'
				},
				rules: {
					phone: [
						{ required: true, message: '请填写手机号', trigger: 'blur' }
					],
					userName: [
						{ required: true, message: '请填写昵名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请填写密码', trigger: 'blur' }
					],
					dbpassword: [
						{
							required: true,
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value === '') {
									callback(new Error('请再次输入密码'));
								} else if (value !== this.registerForm.password) {
									callback(new Error('两次输入密码不一致!'));
								} else {
									callback();
								}
							}
						}
					],
				},
				action: baseURL + '/upload',
				imgURL: baseURL + '/static/img/baseImg.png'
			};
		},
		methods: {
			submitForm() {
				this.$refs.registerForm.validate(valid => {
					if (valid) {
						this.registerForm.portraitSrc = this.imgURL
						this.$POST('/register', this.registerForm).then((response) => {
							console.log(response);
							this.$message({
								message: '注册成功',
								type: 'success',
								center: true,
								duration: 800,
							})
							// 注册成功跳转登录界面
							this.$router.replace({
								path: '/login'
							})
						}).catch((response) => {
							this.$message({
								message: response.data.msg,
								type: 'error',
								center: true,
								duration: 1000,
							})
						})
					} else {
						console.log('表单验证失败！');
						return false;
					}
				});
			},
			resetForm() {
				this.$refs.registerForm.resetFields();
			},
			handleRemove(file, fileList) {
				// 
			},
			handleSuccess(response, file, fileList) {
				this.imgURL = response.imgURL
			},
			handlePreview(file) {

			}
		}
	}
</script>

<style scoped lang="less">
	#registerpage {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0 auto;
		background-image: url('@/assets/img/register/BGI.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;

		.registerform {
			// layout
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: inherit;
			width: 600px;
			height: 600px;
			min-width: 400px;
			min-height: 400px;
			border-radius: 10px;
			box-shadow: 25px 25px 45px rgba(0, 0, 0, 0.5);
			background-color: rgba(230, 230, 230, .3);

			.RF-header {
				width: 100%;
				height: 40px;
				line-height: 40px;
				font-size: 25px;
				margin-bottom: 10px;
				padding-bottom: 80px;

			}

			.registerform-input {
				width: 250px;
				height: 40px;
				margin: 0px 5px 0px 5px;
				padding: 0;
			}

			.registerform-button {
				margin: 0px 20px;
			}

			.el-form-item-img {
				.box-img {
					display: flex;
					width: 65px;
					height: 65px;
					border: 1px solid var(--main-bg-color);
					overflow: hidden;
					justify-content: center;
					align-items: center;
					float: left;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center;
					}
				}
			}
		}
	}
</style>